<template>
    <div class="dev-breadcrumb">
        <div class="dev-width">
            <Breadcrumb class="breadcrumb" separator=">">
                <BreadcrumbItem v-for="(item,index) of routes" :key="index">
                    <nuxt-link v-if="item.path" :to="{path:item.path,query:item.query}"> {{item.name}} </nuxt-link>
                    <span v-else>{{item.name}}</span>
                </BreadcrumbItem>
            </Breadcrumb>
        </div>
    </div>
</template>
<script>
export default {
    name: 'breadcrumb',
    props: {
        routes: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>
<style lang="less" scoped>
.dev-breadcrumb {
  width: 100%;
  height: 40px;
  background: #f6f6f6;
  line-height: 40px;
  margin: 60px 0 10px;
  .breadcrumb {
    display: inline-block;
    font-size: 12px;
  }
}
</style>